import React, { useEffect, useState } from "react";
import backImg from "../../../assets/icon/common_icon_back_white_n.png";
import navMsg from "../../../assets/icon/common_nav_message_white_n.png";
import unLogin from "../../../assets/icon/unlogin.png";
import userimg from '../../../assets/hdpi/user.jpg'
import current from "../../../assets/hdpi/the_current_inquiry.png";
import historical from "../../../assets/hdpi/historical_inquiry.png";
import myicon from "../../../assets/icon/my_icon_next_n.png";
import phone from "../../../assets/hdpi/phone.png";
import file from "../../../assets/icon/my_icon_file_n.png";
import wallet from "../../../assets/icon/my_icon_wallet_n.png";
import collection from "../../../assets/icon/common_button_collection_large_n.png";
import advice from "../../../assets/icon/my_icon_advice_n.png";
import video from "../../../assets/icon/my_icon_video_n.png";
import circle from "../../../assets/icon/my_icon_circle_n.png";
import attention from "../../../assets/icon/common_icon_attention_small_n.png";
import task from "../../../assets/icon/my_icon_task_n.png";
import set from "../../../assets/icon/my_icon_set_n.png";
import "./index.css";
import { useNavigate } from "react-router-dom";
interface userRowState {
  headPic: string;
  email: string;
  isLoggedIn: boolean;
}
const Index = () => {
  const navigate = useNavigate();
  const [userInfo, setuserInfo] = useState<userRowState>({
    headPic: "",
    email: '',
    isLoggedIn: false
  });
  
  useEffect(() => {
    const users = localStorage.getItem("userInfo");

    if (users) {
      try {
        const parsedUserInfo = JSON.parse(users);
        setuserInfo({
          headPic: userimg, // 登录后使用固定头像
          email: parsedUserInfo.email || "用户", // 显示邮箱
          isLoggedIn: true,
        });
      } catch (error) {
        // 解析失败，视为未登录
        setuserInfo({
          headPic: unLogin,
          email: "请登录/注册",
          isLoggedIn: false,
        });
      }
    } else {
      setuserInfo({
        headPic: unLogin,
        email: "请登录/注册",
        isLoggedIn: false,
      });
    }
  }, []);
  
  const navigat = (url: string) => {
    if (!userInfo.isLoggedIn) {
      navigate("/login");
    } else {
      navigate(url);
    }
  };
  console.log(userInfo);
  return (
    <div className="my_box">
      {/* 顶部 */}
      <div className="top_box">
        {/* 手机信息 */}
        <div className="phone">
          <img src={phone} className="" alt="" />
        </div>
        {/* 头部 */}
        <div className="nav_box">
          <img src={backImg} onClick={() => navigate(-1)} alt="" />
          <img src={navMsg} alt="" />
        </div>
        {/* 我的 */}
        <div className="user_box">
          <div className="user">
            <img
              src={userInfo.headPic}
              className="user_img"
              onClick={() => navigat(userInfo.isLoggedIn ? "/userInfo" : "/login")}
              alt="加载出问题啦"
            />
            <span className="user_name" onClick={() => navigat(userInfo.isLoggedIn ? "/userInfo" : "/login")}>
              {userInfo.email}
            </span>
          </div>

          <div className="sign_btn">签到</div>
        </div>
      </div>

      {/* 浮动卡片 */}
      <div className="zw_box">
        <div className="float_box">
          <div className="title">我的问诊</div>
          <div className="content_box">
            <div className="left_box">
              <img src={current} alt="" />
              <span>当前问诊</span>
            </div>
            <img src={myicon} alt="" />
          </div>
          <div className="content_box">
            <div className="left_box">
              <img src={historical} alt="" />
              <span>历史问诊</span>
            </div>
            <img src={myicon} alt="" />
          </div>
        </div>
      </div>
      {/* 菜单栏 */}
      <div className="menu_box">
        <div className="menu">
          <img src={file} alt="" />
          <span>我的档案</span>
        </div>
        <div className="menu">
          <img src={wallet} alt="" />
          <span>我的钱包</span>
        </div>
        <div className="menu" onClick={() => navigat("/userFavorite")}>
          <img src={collection} alt="" />
          <span>我的收藏</span>
        </div>
        <div className="menu">
          <img src={advice} alt="" />
          <span>被采纳建议</span>
        </div>
        <div className="menu">
          <img src={video} alt="" />
          <span>我的视频</span>
        </div>
        <div className="menu">
          <img src={circle} alt="" />
          <span>我的病友圈</span>
        </div>
        <div className="menu" onClick={() => navigat("/userFollow")}>
          <img src={attention} alt="" />
          <span>我的关注</span>
        </div>
        <div className="menu">
          <img src={task} alt="" />
          <span>我的任务</span>
        </div>
        <div className="menu">
          <img src={set} alt="" />
          <span>设置管理</span>
        </div>
      </div>
    </div>
  );
};

export default Index;
